<template>
    <div class="attendance">
        <el-card class="attendance_list">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb_import">
                <el-breadcrumb-item :to="{path: '/info'}">首页</el-breadcrumb-item>
                <el-breadcrumb-item>打卡</el-breadcrumb-item>
                <el-breadcrumb-item>打卡记录</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table ref="attendance_list" :data="attendance_records" class="attedanceList" 
            style="width: 80%; margin: auto;" stripe>
                <el-table-column
                label="记录编号"
                prop="attendanceID">
                </el-table-column>
                <el-table-column
                label="员工编号"
                prop="empID">
                </el-table-column>
                <el-table-column
                label="打卡日期"
                prop="clockTime">
                </el-table-column>
                <el-table-column
                label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="deleteAttendance(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card class="attendance_import">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb_import">
                <el-breadcrumb-item :to="{path: '/info'}">首页</el-breadcrumb-item>
                <el-breadcrumb-item>打卡</el-breadcrumb-item>
                <el-breadcrumb-item>导入记录</el-breadcrumb-item>
            </el-breadcrumb>
            <el-upload
            ref="upload"
            class="upload-area"
            :limit="1"
            action="http://localhost:9095/AttendanceSystem/attendance"
            drag
            :http-request="request"
            :auto-upload="false"
            accept=".txt">
                <div style="margin-top:15%;">
                    <i class="el-icon-plus"></i><br/>
                    <p style="font-size:18px">将文件拖入此处</p>
                </div>
                <div slot="tip" class="el-upload__tip" style="margin-bottom: 5px">仅接受.txt文件且最大数目为1 </div>
                <div slot="tip" class="el-upload__tip" style="margin-bottom: 5px">数据格式如'1, 3018, 2020-06-01'</div>
            </el-upload>
            <el-button type="primary" @click="submit" style="margin-top:1%">导入打卡数据</el-button>
        </el-card>
        <el-dialog title="确认删除该打卡记录" :visible.sync="deleteVisible">
            <el-button style="width:15%; margin:auto;" type="danger" @click="confirmDelete()">确认</el-button>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            attendance_records: [],
            deleteVisible: false,
            attendance_delete: {}
        }
    }, 
    methods: {
        confirmDelete() {
            let that = this;
            fetch('http://localhost:9095/AttendanceSystem/attendance?attendanceID=' + that.attendance_delete.attendanceID, {
                method: 'DELETE',
                headers: new Headers({
                    "username": that.$store.state.username,
                    "Token": that.$store.state.token,
                    "Content-Type": 'application/json'
                })
            }).then(res => {
                if (res.status == 200) {
                    that.updateData();
                    that.$message.success('删除成功')
                    that.deleteVisible = false;
                }
                else {
                    that.$message.error('删除失败')
                    that.deleteVisible = false;
                }
            })
        },
        deleteAttendance(row) {
            this.attendance_delete = row;
            this.deleteVisible = true;
        },
        request(params) {
            var that = this;
            console.log("uploadFile", params);
            const file_upload = params.file;
            var formData = new FormData();
            formData.append("file", file_upload);
            fetch('http://localhost:9095/AttendanceSystem/attendance', {
                method: 'POST',
                body: formData,
                headers: new Headers({
                    "username": that.$store.state.username,
                    "Token": that.$store.state.token,
                    "Accept-Language": "en;zh-CN,zh;q=0.9"
                })
            }).then(res => {
                if (res.status == 200) {
                    that.$message.success('导入成功');
                    that.updateData();
                }
                else {
                    that.$message.error('导入失败');
                }
            })
        },
        submit() {
            this.$refs.upload.submit();
        },
        updateData() {
            let that = this;
            fetch('http://localhost:9095/AttendanceSystem/attendance', {
                method: 'GET',
                headers: new Headers({
                    Token: that.$store.state.token,
                    username: that.$store.state.username,
                    'Content-Type': 'application/json'
                })
            }).then(res => res.json())
            .then(json => {
                that.attendance_records = json;
            })
        }
    },
    beforeRouteEnter(to, from, next) {
        console.log('from', from.path, 'to', to.path);
        next(vm => {
            if (vm.$store.state.department_id == 3) {
                vm.updateData()
            }
            else {
                vm.$router.push('/info');
                vm.$message({
                    showClose: true,
                    type: 'error',
                    message: '权限不足'
                });
            }
        })
    }
}
</script>

<style>
.breadcrumb_import {
    margin-bottom: 1%;
    margin-left: 1%;
}
.attendance_list {
    margin-top: 1%;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 1%;
}
.attendance_import {
    margin-top: 1%;
    margin-left: 3%;
    margin-right: 3%;
}
</style>